<template>
    <div class="bigbox">
        <div class="header_zzz" v-if="open"></div>
        <div class="header_ddd" v-if="open">
            <div class="header_ddd_title">
                <div class="header_ddd_title_left" @click="tab(1)" :style="active==1?'border-bottom: 2px solid rgb(0, 207, 140); color: rgb(0, 207, 140);':'border-bottom: 2px solid white; color: black;'">普通登录</div>
                <div class="header_ddd_title_right" @click="tab(2)" :style="active==2?'border-bottom: 2px solid rgb(0, 207, 140); color: rgb(0, 207, 140);':'border-bottom: 2px solid white; color: black;'" >手机登录</div>
            </div>
            <input type="text" :placeholder="active==1?'请输入账号':'请输入手机号'" name="username" class="header_ddd_user" ref="account">
            <input type="password" :placeholder="active==1?'请输入密码':'请输入验证码'" name="password" class="header_ddd_password" :style="active==1?'width:286px':'width:126px'" ref="password">
            <input type="submit" value="登录" class="header_ddd_login" @click="logi">
            <div class="header_ddd_footer">
                <div class="header_ddd_footer_left">立即注册</div>
                <div class="header_ddd_footer_right" >忘记密码?</div>
            </div>
            <div class="header_ddd_close" @click="close" ></div>
            <div class="header_ddd_btu" :style="active==1?'display:none':'display:block'">获取验证码</div>
        </div>
    </div>
</template>
<script>

    import {mapState } from 'vuex'
import {getLogin} from "../utils/request"
    export default {
        data(){
            return {
                    active:1,
            }
        },
     methods:{
         close(){
             this.$store.commit("change",false)
         },
         tab(i){
            this.active=i
         },
         logi(){
             // let that = this
             getLogin(this.$refs.account.value,this.$refs.password.value).then(
                 (res)=>{
                     if(res.data.code==0){
                         //关掉登录框
                         this.$store.commit("change",false)
                         //存上用户信息
                         this.$store.commit("login",{
                             portrait:res.data.userInfo.avatarUrl,
                             nickname:res.data.userInfo.nickname
                         })
                         //设置登录状态
                         this.$store.commit("loginStatus",true)
                     }
                 }
             )
         }
     },
        computed: {
            // 可以写一些其他的计算属性
            ...mapState({
                // title: state => state.title
                // title: "title"
                open: state => {
                    return state.open;
                }
            })
        }
    }
</script>
<style lang="less" scoped>
    .bigbox{
        width: 100%;
        position: relative;
    }
    .header_zzz{
        position: fixed;
        height: 100%;
        width: 100%;
        background-color: black;
        opacity: 0.5;
        left: 0;
        top: 0;
        z-index: 9999;
        /*display: none;*/
    }
    .header_ddd{
        position: fixed;
        height: 308px;
        background-color: white;
        width: 360px;
        left: 50%;
        top: 50%;
        margin-top: -250px;
        margin-left: -175px;
        z-index: 10000;
        padding: 20px 36px 24px;
        /*display: none;*/
    }
    .header_ddd_title{
        height: 40px;
        line-height: 40px;
    }
    .header_ddd_title_left{
        float: left;
        height: 40px;
        width: 50%;
        text-align: center;
        line-height: 40px;
        color: #00CF8C;
        border-bottom: 2px solid #00CF8C;
    }
    .header_ddd_title_right{
        float: left;
        height: 40px;
        width: 50%;
        line-height: 40px;
        text-align: center;
        border-bottom: 2px solid white;
    }
    .header_ddd_user{
        height: 32px;
        width: 286px;
        margin-top: 15px;
        border: 1px solid #D9D9D9;
        font-size: 14px;
        padding-left: 30px;
        outline: none;
        background-image: url("../assets/images/user.png");
        background-repeat: no-repeat;
        background-position: 5px 5px;
        background-size: 7%;
        /* margin-left: 10px; */
    }
    .header_ddd_password{
        height: 32px;
        width: 286px;
        margin-top: 30px;
        border: 1px solid #D9D9D9;
        font-size: 14px;
        padding-left: 30px;
        outline: none;
        background-image: url("../assets/images/lock.png");
        background-repeat: no-repeat;
        background-position: 5px 5px;
        background-size: 21px;
        float: left;
    }
    .header_ddd_login{
        height: 32px;
        width: 288px;
        background-color: #00CF8C;
        border: none;
        outline: none;
        border-radius: 5px;
        margin-top: 30px;
        color: white;
        font-size: 16px;
    }
    .header_ddd_footer{
        height: 40px;
        line-height: 40px;
        width: 100%;
        font-size: 14px;
        color: #999999;
    }
    .header_ddd_footer_left{
        float: left;
    }
    .header_ddd_footer_right{
        float: right;
    }
    .header_ddd_close{
        position: absolute;
        right: 10px;
        top: 10px;
        height: 30px;
        width: 30px;
        /* background-color: red; */
        background-image: url("../assets/images/close.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 80%;
    }
    .header_ddd_btu{
        position: absolute;
        right: 44px;
        border-radius: 5px;
        top: 136px;
        height: 34px;
        width: 109px;
        background-color: #00CF8C;
        color: white;
        text-align: center;
        display: none;
        font-size: 14px;
        line-height: 34px;
    }
</style>